<template>
  <div>
    <div class="v-header">
      <div class="back" @click="back"><i class="iconfont icon-left"></i></div>
      <div class="title">返利宝</div>
      <div class="right" @click="issue"><i class="iconfont icon-wenti"></i></div>
    </div>
    <div class="rebate-one">
      <p>0</p>
      <p>昨日返利(福元)</p>
      <p>累计返利: <span>0</span></p>
    </div>
    <div class="rebate-two">
      <div class="rebate-two-item active">
        <p>我的粉丝</p>
        <p>0人</p>
      </div>
      <div class="rebate-two-item">
        <p>供需返利</p>
        <p>0 <span>(福元)</span></p>
      </div>
    </div>
    <div class="r-wrapper" ref="rebateWrapper">
      <div class="r-container" v-if="change===0">
        <div class="rebate-tr">
          <div class="rebate-tr-item">头像</div>
          <div class="rebate-tr-item">用户昵称</div>
          <div class="rebate-tr-item">等级</div>
          <div class="rebate-tr-item">时间</div>
        </div>
        <div class="rebate-tr">
          <div class="rebate-tr-item rebate-img"><img src="../../common/img/mescroll-empty.png" alt=""></div>
          <div class="rebate-tr-item">Lily</div>
          <div class="rebate-tr-item">v1</div>
          <div class="rebate-tr-item">2016-9-18</div>
        </div>
        <div class="rebate-tr">
          <div class="rebate-tr-item rebate-img"><img src="../../common/img/mescroll-empty.png" alt=""></div>
          <div class="rebate-tr-item">Lily</div>
          <div class="rebate-tr-item">v1</div>
          <div class="rebate-tr-item">2016-9-18</div>
        </div>
        <div class="rebate-tr">
          <div class="rebate-tr-item rebate-img"><img src="../../common/img/mescroll-empty.png" alt=""></div>
          <div class="rebate-tr-item">Lily</div>
          <div class="rebate-tr-item">v1</div>
          <div class="rebate-tr-item">2016-9-18</div>
        </div>
      </div>
      <div class="r-container" v-else-if="change===1">
        <div class="rebate-tr">
          <div class="rebate-tr-item">商品</div>
          <div class="rebate-tr-item">购买时间</div>
          <div class="rebate-tr-item">价格</div>
          <div class="rebate-tr-item">返利进度</div>
        </div>
        <div class="rebate-tr">
          <div class="rebate-tr-item">饼干</div>
          <div class="rebate-tr-item">2016-9-18</div>
          <div class="rebate-tr-item">10.00</div>
          <div class="rebate-tr-item">已返5.00</div>
        </div>
        <div class="rebate-tr">
          <div class="rebate-tr-item">饼干</div>
          <div class="rebate-tr-item">2016-9-18</div>
          <div class="rebate-tr-item">10.00</div>
          <div class="rebate-tr-item">已返5.00</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import {$} from '../../common/config'
  export default {
    data() {
      return {
        change:0
      };
    },
    created() {

    },
    mounted() {
      var that=this;
      var s=document.querySelectorAll('.rebate-two-item');
      for(let i=0;i<s.length;i++){
        s[i].onclick=function () {
          for(let j=0;j<s.length;j++){
            s[j].classList.remove('active');
          }
          this.classList.add('active');
          if(i===0){
            that.change=0;
          }else if(i===1){
            that.change=1;
          }
        }
      }
      this._initScroll();
    },
    methods: {
      back: function () {
        this.$router.back(-1);
      },
      issue:function () {
        this.$router.push('/issue');
      },
      _initScroll: function () {
        this.scroll = new BScroll(this.$refs.rebateWrapper, {click: true});
      }
    },
    components: {}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";
  .rebate-one{
    width: 100%;
    height: 110px;
    padding: 10px 0;
    position: fixed;
    top:44px;
    background-color: #f06a22;
    color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
    p{
      line-height: 30px;
    }
    p:first-child{
      font-size: 17px;
    }
    P:nth-child(3){
      span{
        padding-left: 5px;
      }
    }
  }
  .rebate-two{
    width: 100%;
    height: 60px;
    position: fixed;
    top:154px;
    display: flex;
    background-color: #FFFFFF;
    margin-bottom: 5px;
    .rebate-two-item{
      flex: 1;
      text-align: center;
      padding: 5px 0;
      box-sizing: border-box;
      font-size: 15px;
      p:nth-child(2){
        padding-top: 10px;
        color: #f43b3b;
        span{
          color: #313131;
        }
      }
    }
    .rebate-two-item.active{
      background-color: #f5f5f5;
    }
  }
  .r-wrapper{
    width: 100%;
    height: calc(100% - 219px);
    position: absolute;
    top:219px;
    overflow: hidden;
    .r-container{
      width: 100%;
      background-color: #FFFFFF;
      .rebate-tr{
        width: 100%;
        height: 44px;
        display: flex;
        border-bottom: solid 1px #f5f5f5;
        box-sizing: border-box;
        .rebate-tr-item{
          flex: 1;
          line-height: 44px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .rebate-tr-item.rebate-img{
          padding-top: 7px;
          box-sizing: border-box;
          img{
            width: 30px;
            height: 30px;
            border-radius: 100px;
          }
        }
      }
    }
  }
</style>
